import 'package:flutter/material.dart';
import 'package:flutter_app1/pages/home_page.dart';
import 'package:flutter_app1/pages/my_page.dart';
import 'package:flutter_app1/pages/travel_page.dart';
import 'package:flutter_app1/pages/destination_page.dart';

class TabNavigator extends StatefulWidget {
  @override
  _TabNavigatorState createState() => _TabNavigatorState();
}

/// AutomaticKeepAliveClientMixin: 当widget从tree中remove后仍然保存相关变量
/// SingleTickerProviderStateMixin：作为动画构造器中的vsync参数，用于绑定动画的定时器到一个可视的widget，当widget不显示时，动画定时器将会暂停，当widget再次显示时，动画定时器重新恢复执行，这样就可以避免动画相关UI不在当前屏幕时消耗资源
class _TabNavigatorState extends State<TabNavigator>
    with AutomaticKeepAliveClientMixin, SingleTickerProviderStateMixin {
  final _defaultColor = const Color(0xff8a8a8a);
  final _activeColor = const Color(0xff50b4ed);
  int _currentIndex = 0;
  late PageController _controller;

  /// 是widget创建执行的第一个方法，可以再里面初始化一些数据
  @override
  void initState() {
    super.initState();
    _controller = PageController(
      initialPage: 0,
    );
  }

  /// Widget 销毁了
  @override
  void dispose() {
    super.dispose();
    _controller.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: PageView(
        controller: _controller,
        physics: NeverScrollableScrollPhysics(), // 滚动物理，不允许用户滚动。
        children: <Widget>[
          HomePage(title:"首页"),
          DestinationPage(),// 目的地
          TravelPage(),// 旅拍
          MyPage(),// 我的
        ]
      ), // Thi
      bottomNavigationBar: BottomNavigationBar(
          currentIndex: _currentIndex,
          onTap: (index) {
            _controller.animateToPage(index, curve: Curves.easeIn, duration: Duration(milliseconds: 260));
            setState(() {
              _currentIndex = index;
            });
          },
          type: BottomNavigationBarType.fixed,
          selectedFontSize: 12,
          items: [
            BottomNavigationBarItem(
              icon: Image.asset(
                'assets/icon/xiecheng.png',
                width: 22,
                height: 22,
              ),
              activeIcon: Image.asset(
                'assets/icon/xiecheng_active.png',
                width: 22,
                height: 22,
              ),
              label: '首页',
              backgroundColor:
                  _currentIndex != 1 ? _defaultColor : _activeColor,
            ),
            BottomNavigationBarItem(
              icon: Image.asset(
                'assets/icon/mude.png',
                width: 24,
                height: 24,
              ),
              activeIcon: Image.asset(
                'assets/icon/mude_active.png',
                width: 24,
                height: 24,
              ),
              label: '目的地',
            ),
            BottomNavigationBarItem(
              icon: Image.asset(
                'assets/icon/lvpai.png',
                width: 23,
                height: 23,
              ),
              activeIcon: Image.asset(
                'assets/icon/lvpai_active.png',
                width: 23,
                height: 23,
              ),
              label: '旅拍',
            ),
            BottomNavigationBarItem(
              icon: Image.asset(
                'assets/icon/wode.png',
                width: 23,
                height: 23,
              ),
              activeIcon: Image.asset(
                'assets/icon/wode_active.png',
                width: 23,
                height: 23,
              ),
              label: '我的',
            ),
          ]),
    );
  }

  @override
  bool get wantKeepAlive => true;
}
